<template>
  <div>
    <div class="user_info">

      <div class="user_info_right">
        <!--<a @click="growthValue" class="user_growValue">
          <span style="" class="icon_wrp"><i class="icon iconfont icon-chengchangzhi- icon_code"></i></span>
          <span>成长值（<span>{{queryCount.expValue||0}}</span>）</span>
        </a>-->
      </div>
       <div class="top_email" :class="{'has_message':queryCount.unreadCount}" @click="$router.push({path: 'infoList'})">
        <a><i class="icon iconfont icon-openemail"></i></a>
      </div>
      <a @click="$router.push({name: 'userInfo'})" style="display: block; overflow: hidden;height: 100%;color: #666666;">
        <div class="user_avatar" @click="userInfoData"><img :src="userUrl"></div>
        <div class="user_text">
          <div class="user_text_line"><b class="user_name">{{userInfo.usrName}}</b>
            <span class="user_padding">{{userInfo.usrSex | userSex}}</span>
            <span class="user_padding">{{userInfo.location}}</span>
          </div>
          <div class="user_text_line">芸券号：{{userInfo.usrId}}</div>
        </div>
      </a>
    </div>
    <!--<div class="clear"></div>-->
    <div class="center_info">
      <ul>
        <li @click="$router.push({path: 'cardList'})">
          <a>
            
            <b>{{queryCount.couponCount||0}}</b>
            <span>优惠券</span>
          </a>
        </li>
        <li @click="$router.push({path: 'payment'})">
          <a>
            
            <b>{{queryCount.totNum||0}}</b>
            <span>芸券</span>
          </a>
        </li>
        <li @click="$router.push({path: 'wallet'})">
          <a>
           
            <b>{{queryCount.totalAmt||0}}</b>
             <span>钱包</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="icon_list">
      <ul>
        <li @click="$router.push({path:'couponDeal'})">
          <a>
            <icon iconName="#icon-youhuiquanjiaoyi"></icon>
            
          </a>
          <p>电子券交易</p>
        </li>
        <li @click="$router.push({path: 'myOrder'})">
          <a>
            <icon iconName="#icon-wodedingdan1"></icon>
          
          </a>
           <p> 我的订单</p>
        </li>
        <!--<li @click="$router.push({path: 'comments'})">-->
        <!--<a>-->
        <!--<icon iconName="#icon-wodedingdan1"></icon>-->
        <!--我的评论-->
        <!--</a>-->
        <!--</li>-->
        <li @click="$router.push({path: 'orderStatus'})">
          <a>
            <icon iconName="#icon-queryGoods"></icon>
           
          </a>
          <p> 提货查询</p>
        </li>
        <li @click="$router.push({path: 'friends'})">
          <a>
            <icon iconName="#icon-quanyouquan1"></icon>
   
          </a>
          <p>券友圈</p>
        </li>
        <li @click="$router.push({path: 'comments'})">
          <a>
            <icon iconName="#icon-qukuailianxinxi"></icon>
          </a>
          <p> 我的评价</p>
        </li>
        <li @click="$router.push({path: 'myCollection'})">
          <a>
            <icon iconName="#icon-shoucang_gerenzhongxinxiaoguo"></icon>
         
          </a>
          <p>我的收藏</p>
        </li>
        <li @click="$router.push({path: 'block'})" style="padding-bottom: 2.142rem;">
          <a>
            <icon iconName="#icon-qukuailianxinxi"></icon>
           
          </a>
          <p> 公示信息</p>
        </li>
        <li @click="shareState = true" style="padding-bottom: 2.142rem;">
          <a>
            <icon iconName="#icon-fenxiangyaoqingma"></icon>
      
          </a>
          <p>      邀请分享</p>
        </li>
        <li @click="$router.push({path: 'helpFeedback'})" style="padding-bottom:2.142rem;">
          <a>
            <icon iconName="#icon-bangzhuyufankui"></icon>

          </a>
        
          <p>    帮助与反馈</p>
        </li>
        </ul>
         <!--<div class="clear"></div>-->
        <ul>
        <li @click="$router.push({path: 'aboutUs'})">
          <a>
            <icon iconName="#icon-guanyuwomen"></icon>
            关于我们
          </a>
        </li>
        <li @click="$router.push({path: 'qidai'})">
          <a>
            <icon iconName="#icon-gengduo"></icon>
            更多
          </a>
        </li>
      </ul>
  
    </div>
    <div class="myGift" @click="myGift" v-if="showGift">
      <img src="../../images/my_gift.gif" alt="">
    </div>
    <!--"我的"引导页num输入8-->
    <landing-page :num="landingPageNum" :max="max"></landing-page>
    <!--邀请与分享页面-->
    <share v-if="shareState" @cancel="shareState = !shareState" :isNotFir = "false"></share>
    <footer-view></footer-view>
  </div>
</template>

<script>
  import getData from "../../service/getData.js";
  import share from "../../componentes/global/share.vue";
  import {
    openGift,
    giftList,
    centerInfo
  } from "../../service/getData3.js";
  import getData4 from "../../service/getData4.js";
  import * as types from "../../vuex/types.js";
  import landingPage from "../../componentes/global/landingPage.vue";
  import {
    Storage
  } from "src/utils/storage.js";
  
  import {
    mapState
  } from "vuex";
  import {
    Toast,
    Indicator
  } from "mint-ui";
  
  export default {
    name: "center",
    data: function() {
      return {
        showGift: false,
        queryCount: {
          couponCount: 0, // 商券数量
          commentCount: 0, // 评论数量
          totNum: 0, // 芸券数量
          expValue: 0, // 成长值
          totalAmt: 0, // 钱包总额
          unreadCount: false // 是否有新消息
        },
        landingPageNum: 0, //值是8时为"我的"引导页,值是0时为关闭
        shareState: false
      };
    },
    watch: {
      landingPageNum(value) {
        if (value === 8) {
          document.getElementsByClassName("ban-over-flow")[0].style.overflow =
            "hidden";
        }
      }
    },
  
    computed: {
      //计算最大引导序号
      max() {
        return this.showGift ? 12 : 11;
      },
      ...mapState({
        userInfo: state => state.user.userInfo,
        userUrl: state => state.user.userUrl
      })
    },
    components: {
      landingPage,
      share
    },
    created: async function() {
      // 分享弹框
      let shareState = this.$route.query.shareState;
      if (Boolean(shareState)) {
        this.shareState = true;
      } else {
        this.shareState = false;
      }
      let usrId = this.userInfo.usrId;
      this.$store.commit("changeState", true);
      // 个人中心
      this.queryCount = (await getData4.getUsrInfo({
        usrId
      })).content;
      this.$emit("header-info", {
        title: "个人中心",
        isBack: false,
        isMessage: true,
        footerShow: true,
        hasMes: this.queryCount.unreadCount
      });
      // 新手大礼包入口
      let data = await giftList({
        usrId
      });
      this.showGift = !!data.content;
    },
    mounted: function() {
      document.body.scrollTop = 0;
      //判断是否第一次进入，进行引导页提示。
      if (Storage.get("firstEntry", true)) {
        this.landingPageNum = 8; //开启引导
        Storage.set("firstEntry", false, true);
      }
    },
    methods: {
      myGift() {
        this.$router.push({
          name: "myGift"
        });
      },
      userInfoData: function() {
        this.$router.push({
          name: "userInfo"
        });
      },
      growthValue: function() {
        this.$router.push({
          name: "growth-value",
          params: {
            max: this.queryCount.expValue
          }
        });
      }
    }
  };
</script>

<style scoped>
  .top_email {
    float: right;
    margin-right: .6rem;
  }
  
  .top_email .icon {
    font-size: 1.6rem;
  }
  
  .top_email a {
    color: #fff;
    display: block;
  }
  
  .myGift {
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    width: 3.4rem;
  }
  
  .myGift img {
    max-width: 100%;
  }
  
  .commentPic {
    width: 2rem;
    height: 2rem;
    position: relative;
    top: 0.2rem;
    overflow: hidden;
    vertical-align: -0.15rem;
  }
   .has_message:after{content: "";position: absolute;top:2.2rem;right:7.5rem;z-index:1;width: .6rem;height: .6rem;background: #f00;border-radius: .6rem;}
   .icon_list ul:nth-of-type(1) li:nth-of-type(1){
			border-top-left-radius: 1rem;
		}
		.icon_list ul:nth-of-type(1) li:nth-of-type(3){
			border-top-right-radius: 1rem;
		}
		.icon_list ul:nth-of-type(1) li:nth-of-type(7){
			border-bottom-left-radius: 1rem;
		}
		.icon_list ul:nth-of-type(1) li:nth-of-type(9){
			border-bottom-right-radius: 1rem;
		}
		.icon_list ul:nth-of-type(2) li:nth-of-type(1){
			margin-right: 5%;
		}
</style>
